import { useState, useRef } from "react";
import Child from "./Child";

export default function Parent() {

    const [list, setList] = useState([1, 2, 3]);
    const inputRef = useRef(null);
    // 确认按钮的事件处理函数，用于向列表中添加新的元素，并将焦点设置到输入框上。
    // 当用户点击确认按钮时，handle 函数会被调用。
    // 它会使用 setList 函数来更新 list 状态，将新的元素 4 添加到列表的末尾。
    const handle = () => {
        setList([...list, inputRef.current.value]);
        inputRef.current.value = "";
    }
    return (
        <div className="App">
            <div className="hd">
                <input type="text" ref={inputRef} />
                <button onClick={handle}>确认</button>
            </div>
            <Child list={list} />
        </div>
    );
}
